<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="../js/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/utils.js"></script>
	<script type="text/javascript" src="../plugin/layer/layer.js"></script>
<title>基础数据表格</title>
</head>
<body>
<table id="dg"></table> 




<script>
$(function(){
   
$('#dg').datagrid({    
	rownumbers:true,
// 	singleSelect:true,·
	pagination:true,
	url:'datagrid_data.json',
	method:'get',
    columns:[[
        {field:'id',title:'id',width:100,checkbox:true},
        {field:'code',title:'Code',width:100},    
        {field:'name',title:'Name',width:100},    
        {field:'price',title:'Price',width:100,align:'right'}    
    ]]    
});
var pager = $('#dg').datagrid().datagrid('getPager');	// get the pager of datagrid
pager.pagination({
	buttons:[{
		iconCls:'icon-search',
		handler:function(){
			alert('search');
		}
	},{
		iconCls:'icon-edit',
		handler:function(){
			alert('edit');
		}
	},{
		iconCls:'icon-add',
		handler:function(){
			alert('add');
		}
	},
	{
		iconCls:'icon-remove',
		handler:function(){
			utils.edit($('#dg').datagrid("getSelected"));
// 			if(confirm("删除？")){
// 				$('#dg').datagrid("getSelected");//获取选中行数据
// 			}
			
		}
	}]
});	
});
</script>




















<!-- 		<table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options=" -->
<!-- 				rownumbers:true, -->
<!-- 				singleSelect:true, -->
<!-- 				autoRowHeight:false, -->
<!-- 				pagination:true, -->
<!-- 				pageSize:10, -->
<!-- 				fit:true, -->
<!--            		fitColumns:true", -->
<!-- 				> -->
<!-- 		<thead> -->
<!-- 			<tr> -->
<!-- 				<th field="inv" width="80">Inv No</th> -->
<!-- 				<th field="date" width="100">Date</th> -->
<!-- 				<th field="name" width="80">Name</th> -->
<!-- 				<th field="amount" width="80" align="right">Amount</th> -->
<!-- 				<th field="price" width="80" align="right">Price</th> -->
<!-- 				<th field="cost" width="100" align="right">Cost</th> -->
<!-- 				<th field="note" width="110">Note</th> -->
<!-- 			</tr> -->
<!-- 		</thead> -->
<!-- 	</table> -->
	
	
<!-- 	<script> 
 	$(function(){
 		$('#dg').datagrid({loadFilter:pagerFilter});绑定过滤器
 		$('#dg').datagrid('loadData', getData());
 	});
 		function getData(){
 			var rows = [];
 			for(var i=1; i<=800; i++){
 				var amount = Math.floor(Math.random()*1000);
 				var price = Math.floor(Math.random()*1000);
 				rows.push({
 					inv: 'Inv No '+i,
 					date: $.fn.datebox.defaults.formatter(new Date()),
 					name: 'Name '+i,
 					amount: amount,
 					price: price,
 					cost: amount*price,
 					note: 'Note '+i
 				});
 			}
 			return rows;
 		}
		
 		function pagerFilter(data){
 			if (typeof data.length == 'number' && typeof data.splice == 'function'){	 is array
 				data = {
 					total: data.length,
 					rows: data
 				}
 			}
 			var dg = $(this);
 			var opts = dg.datagrid('options');
 			var pager = dg.datagrid('getPager');
 			pager.pagination({
 				onSelectPage:function(pageNum, pageSize){
 					opts.pageNumber = pageNum;
 					opts.pageSize = pageSize;
 					pager.pagination('refresh',{
 						pageNumber:pageNum,
 						pageSize:pageSize
 					});
 					dg.datagrid('loadData',data);
 				}
 			});
 			if (!data.originalRows){
 				data.originalRows = (data.rows);
 			}
 			var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
 			var end = start + parseInt(opts.pageSize);
 			data.rows = (data.originalRows.slice(start, end));
 			return data;
 		}-->
<!-- 	</script> -->
</body>
</html>